<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>已结清合同</title>
    <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.css"/>
    <link rel="stylesheet" href="/static/css/index.css">
    <style>
        tr td, table {
            border: 1px solid #000;
            border-collapse: collapse;
            text-align: center;
        }

        #tr1 {
            color: blue;
        }

        #top {
            margin-left: 100px;
            margin-top: 100px;
        }

        　　tr:nth-child(2n) {
            　　　　background-color: #2AABD2;
        }

        　　tr:nth-child(2n+1) {
            　　　　background-color: #3E8F3E;
        }


    </style>
</head>
<body>

<div id="top">

    <table width="900px">
        <tr class="panel-footer">
            <td>
                客户名称：<input type="text" v-model="check.name">
                合同类型：<select v-model="check.type">
                <option value="原始合同">原始合同</option>
                <option value="续费合同">续费合同</option>
            </select>
                签约日期：<input type="date" v-model="check.startTime">至
                <input type="date" v-model="check.endTime">
                <button type="button" class="btn btn-default" @click="checkInfo">合同检索</button>
            </td>
        </tr>
        <tr>
            <td>
                合同范围：<input type="radio" name="scope">我的合同
                <input type="radio" name="scope" checked>全部合同
            </td>
        </tr>
        <tr>
            <td>
                <table width="900px" class="panel-footer">
                    <tr id="tr1" vclass="panel-footer">
                        <td>合同编号</td>
                        <td>买房名称</td>
                        <td>卖方名称</td>
                        <td>合同金额</td>
                        <td>签约日期</td>
                        <td>合同状态</td>
                    </tr>
                    <tr v-for="(value,index) in contract">
                        <td><a href="#" @click="showInfo(value.id)">{{value.id}}</a></td>
                        <td>{{value.sellName}}</td>
                        <td>{{value.buyName}}</td>
                        <td>￥{{value.money}}</td>
                        <td>{{value.startDate}}</td>
                        <td>{{value.paystate}}</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr class="panel-footer">
            <td>
                <nav aria-label="Page navigation">
                    <ul class="pagination" >
                        <li>
                            <a href="#" aria-label="Previous" :style="style2" @mouseover="previous" @click="previous1">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li v-for="(value,index) in totalPage">
                            <a href="#" @click="getNowPage(index)">{{index+1}}</a>
                        </li>
                        <li>
                            <a href="#" aria-label="Next" :style="style3" @mouseover="next" @click="next1">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" aria-label="Next" :style="style3" @mouseover="next" @click="next1">
                                <span aria-hidden="true">共{{totalPage}}页, {{page}}条</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </td>
        </tr>
        <tr v-show="isShow">
            <td >
                <button type="button" class="btn btn-default" @click="deleteInfo">删除合同</button>
                <button type="button" class="btn btn-default" @click="editUserDialog">修改合同状态</button>
            </td>

        </tr>

        <tr v-show="isShow">
            <td >
                合同类型：<input type="text" v-model="contractInfo.type"><br>
                合同编号：<input type="text" v-model="contractInfo.id"><br>
                付款金额：<input type="text" v-model="contractInfo.money"><br>
                合同状态：<input type="text" v-model="contractInfo.paystate"><br>
                签约日期：<input type="text" v-model="contractInfo.startDate"><br>
                结束日期：<input type="text" v-model="contractInfo.endDate"><br>
                付款方式：<input type="text" v-model="contractInfo.payway">
            </td>

        </tr>
        <tr v-show="isShow">
            <td>

                <table style="float: left;margin-left: 100px;margin-right: 150px" class="btn btn-default">

                    <tr>
                        <td>
                            <input type="button" value="卖方（乙方）">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            公司名称：<input type="text" v-model="contractInfo.buyName">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            公司地址：<input type="text" v-model="contractInfo.buyAddress">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            联系电话：<input type="tel" v-model="contractInfo.buyName">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            公司邮箱：<input type="email" v-model="contractInfo.buyEmail">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            公司网址：<input type="url" v-model="contractInfo.buyUrl">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            负责人 &nbsp;：<input type="text" v-model="contractInfo.buyUser">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            负责人电话：<input type="tel" v-model="contractInfo.buyUserTel">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            负责人邮箱：<input type="email" v-model="contractInfo.buyUserEmail">
                        </td>
                    </tr>

                </table>

                <table class="btn btn-default">
                    <tr>
                        <td>
                            <input type="button" value="买方（甲方）">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            公司名称：<input type="text" v-model="contractInfo.sellName">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            公司地址：<input type="text" v-model="contractInfo.sellAddress">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            联系电话：<input type="tel" v-model="contractInfo.sellTel">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            公司邮箱：<input type="email" v-model="contractInfo.sellEmail">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            公司网址：<input type="url" v-model="contractInfo.sellUrl">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            负责人&nbsp; ：<input type="text" v-model="contractInfo.sellUser">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            负责人电话：<input type="tel" v-model="contractInfo.sellUserTel">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            负责人邮箱：<input type="email" v-model="contractInfo.sellUserEmail">
                        </td>
                    </tr>

                </table>
            </td>

        </tr>
    </table>


    <el-dialog :visible.sync="editDialogVisible" title="修改合同状态" @close="closeEditDialog" width="500px" center>
        <el-form ref="form"  label-width="120px">
            <el-form-item label="支付状态:">
                <el-select v-model="paystate" placeholder="请选择">
                    <el-option v-for="item in paystates"  :label="item" :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" size="small" @click="updateContract">确认</el-button>
                    <el-button type="primary" size="small" @click="closeEditDialog">取消</el-button>
                </span>
        </template>
    </el-dialog>
</div>
<script src="../static/js/vue.js"></script>
<script src="../static/js/axios.min.js"></script>
<script src="/static/js/index.js"></script>
<script>
    new Vue({
        el: "#top",
        data: {
            check: {
                name: '',
                type: '',
                startTime: '',
                endTime: '',
            },
            who: '',
            contract: {
                id: '',
                sellName: '',
                buyName: '',
                money: '',
                startDate: '',
                paystate: '',
            },
            contractInfo: {},
            totalPage:'',
            nowPage:'1',
            style1:'pointer-events:none',
            style2:'',
            style3:'',
            page:'',
            editDialogVisible: false,
            paystate:'',
            paystates:['未付款','已付款','已付清'],
            isShow:false,


        },
        methods: {
            //查询当前页的数据
            getAll() {
                axios.get("/getRenewalInfo.Contract?nowPage="+this.nowPage).then(response => {
                    let data = response.data;
                    console.log(data)
                    this.page = data.key
                    this.totalPage =  Math.ceil(Number(data.key)/5)
                    this.contract = data.value;
                })
            },
            //根据id删除合同信息
            deleteInfo(){
                this.$confirm(
                    '是否删除该合同！',
                    '提示',
                    {confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(() => {
                    this.deleteContract();
                }).catch((err) => {
                    this.$message({
                        message: '合同删除已取消！！',
                        type: 'warning'
                    });
                });

            },
            deleteContract(){
                axios.get("/deleteById.Contract?id="+this.contractInfo.id).then(response =>{
                    if (response.data.key == '1'){
                        this.$message({
                            type: 'success',
                            message: '合同删除成功'

                        });
                        this.getAll();
                    }else {
                        this.$message({
                            message: '合同删除失败！',
                            type: 'warning'
                        });
                    }
                })
            },
            closeEditDialog() {
                this.editDialogVisible = false
            },
            updateContract(){
                this.contractInfo.paystate = this.paystate
                this.realUpdateContract();
            },
            realUpdateContract(){
                axios.get("/updateContractById.Contract?id="+this.contractInfo.id+"&paystate="+this.contractInfo.paystate).then(response =>{
                    if (response.data.key == '1'){
                        this.$message({
                            type: 'success',
                            message: '合同状态修改成功'

                        });
                        this.getAll();
                    }else {
                        this.$message({
                            message: '合同状态修改失败！',
                            type: 'warning'
                        });
                    }
                })
            },

            editUserDialog() {
                this.editDialogVisible = true
            },
            getNowPage(res){
                this.nowPage = res+1;
                this.getAll();
                this.previous();
                this.next();
            },
            previous(){
                if (this.nowPage == '1'){
                    this.style2 = this.style1
                }else {
                    this.style2 = ''
                }
            },
            previous1(){
                this.next();
                this.previous();
                this.nowPage = this.nowPage - 1;
                this.getAll();
            },
            next(){
                if (this.nowPage == this.totalPage){
                    this.style3 = this.style1
                }else {
                    this.style3 = ''
                }
            },
            next1(){
                this.previous();
                this.next();
                this.nowPage = this.nowPage + 1;
                this.getAll();
            },
            showInfo(res) {
                this.isShow = true
                axios.get("/getInfoById.Contract?id=" + res).then(response => {
                    let data = response.data;
                    console.log(data)
                    this.contractInfo = data.value;
                })
            },
            checkInfo() {

                axios.get("/checkInfo.Contract?type=" + this.check.type + "&name=" + this.check.name + "&startTime=" + this.check.startTime + "&endTime=" + this.check.endTime+"&nowPage="+this.nowPage).then(response => {
                    let data = response.data;
                    console.log(data)
                    if (data.key != '0') {
                        console.log("查询成功----")
                        this.page = data.key
                        this.totalPage =  Math.ceil(Number(data.key)/5)
                        this.contract = data.value;
                    } else {
                        console.log("查询失败")
                    }
                })
            }
        },
        created(){
            this.getAll();
            this.previous();
            this.next();
            this.$message({
                type: 'success',
                message: '点击合同编号，即可查看合同详细信息！'

            });
        },

    })
</script>
</div>

</body>
</html>